<template>
  <div class="box">
    <el-form :model="ruleForm" ref="ruleForm">
      <el-form-item prop="input">
        <el-input
          v-model="ruleForm.input"
          placeholder="反馈人"
          style="width: 480px; height: 36px; margin-left: 15px"
        ></el-input>
      </el-form-item>

      <el-form-item prop="input2">
        <el-input
          v-model="ruleForm.input2"
          placeholder="反馈内容"
          style="width: 480px; height: 36px; margin-left: 15px"
        ></el-input>
      </el-form-item>

      <el-form-item prop="input3">
        <el-date-picker
          v-model="ruleForm.input3"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 480px; height: 36px; margin-left: 15px"
        >
        </el-date-picker>
        <br />
      </el-form-item>

      <el-form-item prop="input4">
        <el-input
          v-model="ruleForm.input4"
          placeholder="反馈回复"
          style="width: 480px; height: 36px; margin-left: 15px; margin-top: 10px"
        ></el-input>
      </el-form-item>

      <el-form-item prop="input5">
        <el-select
          v-model="ruleForm.input5"
          placeholder="反馈状态"
          style="width: 480px; height: 36px; margin-left: 15px; margin-top: 10px"
        >
          <el-option label="已处理" value="1"></el-option>
          <el-option label="未处理" value="2"></el-option>
        </el-select>
      </el-form-item>
      <div class="btn">
        <el-button
          type="primary"
          style="width: 142px; margin-left: 15px"
          icon="el-icon-search"
          @click="handleSou"
          >搜索</el-button
        >
        <el-button
          type="warning"
          style="width: 142px; margin-left: 15px"
          icon="el-icon-edit"
          @click="resetFields('ruleForm')"
          >重置</el-button
        >
        <el-button
          type="danger"
          style="width: 142px; margin-left: 15px"
          icon="el-icon-delete"
          @click="handleShan"
          >批量删除</el-button
        >
        <el-button
          type="success"
          style="width: 142px; margin-left: 15px"
          icon="el-icon-upload"
          @click="handleDao"
          >批量导出</el-button
        >
      </div>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      stripe
    >
      <el-table-column type="selection" width="65"> </el-table-column>

      <el-table-column prop="unitname" label="反馈人" width="248">
      </el-table-column>

      <el-table-column prop="buildnum" label="反馈内容" width="248">
      </el-table-column>

      <el-table-column prop="storeynum" label="反馈时间" width="248">
      </el-table-column>

      <el-table-column prop="homenum" label="服务内容" width="248">
      </el-table-column>

      <el-table-column prop="homename" label="处理状态" width="248">
      </el-table-column>

      <el-table-column prop="homestatus" label="服务评分" width="248">
      </el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            style="background-color: rgb(255, 255, 255); color: black"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="Size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      // 分页
      Size: 10,
      Yema: "",
      total: 0,
      currentPage4: 1,
      // 表格
      tableData: [],
      ruleForm: {
        // 第五个
        input5: "",
        // 第四个
        input4: "",
        // 第三个
        input3: "",
        // 第二个
        input2: "",
        // 第一个
        input: "",
      },
    };
  },
  created() {
    this.List();
  },
  methods: {
    // 批量导出
    handleDao() {
      this.$confirm("确定导出excel文件？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // import("@/vendor/Export2Excel").then((excel) => {
          //   const tHeader = ["反馈人", "反馈内容", "反馈时间",'服务内容','处理状态','服务评分'];
          //   const filterVal = ["id", "username", "avatar",'unitname','unitname','unitname'];
          //   excel.export_json_to_excel2(
          //     tHeader,
          //     this.tableData,
          //     filterVal,
          //     "数据列表"
          //   );
          // });
          let arr = [];
          for (let i = 0; i < this.tableData.length; i++) {
            let obj = {
              反馈人: this.tableData[i].unitname,
              反馈内容: this.tableData[i].buildnum,
              反馈时间: this.tableData[i].storeynum,
              服务内容: this.tableData[i].homenum,
              处理状态: this.tableData[i].homename,
              服务评分: this.tableData[i].homestatus,
            };
            arr.push(obj);
          }
          console.log(arr);
          // 根据现在有的数据  生成一个新的数组  以中文作为key 然后在导出
          const worksheet = XLSX.utils.json_to_sheet(arr); //传入要导出的
          // 表格数据
          const workbook = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(workbook, worksheet, "data"); //data为自定义表名
          XLSX.writeFile(workbook, "数据列表.xlsx"); // one.xlsx 文件名
        })
        .catch(() => {});
    },
    // 批量删除
    handleShan() {
      this.$alert("请选择要删除的反馈内容", "标题名称", {
        confirmButtonText: "确定",
        callback: (action) => {},
      });
      this.List();
    },
    // 重置
    resetFields(formName) {
      this.$refs[formName].resetFields();
      this.List();
    },
    // 搜索
    handleSou() {
      this.List();
    },
    // 分页
    handleSizeChange(val) {
      console.log(val);
      this.Size = val;
      this.$axios
        .get("http://community.byesame.com/poster/getFeedBack", {
          params: {
            pageNum: this.Size,
            currPage: this.Yema,
          },
        })
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    // 也是分页
    handleCurrentChange(val) {
      this.Yema = val - 1;
      this.$axios
        .get("http://community.byesame.com/poster/getFeedBack", {
          params: {
            pageNum: this.Size,
            currPage: this.Yema,
          },
        })
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    // 多选框的返回值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // ajax
    List() {
      this.$axios
        .get("http://community.byesame.com/poster/getFeedBack", {
          params: {
            username: this.ruleForm.input,
            feedtext: this.ruleForm.input2,
            startDate: this.ruleForm.input3,
            endDate: this.ruleForm.input3,
            feedresult: this.ruleForm.input4,
            feedstatus: this.ruleForm.input5,
            currPage: 0,
            pageNum: 10,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
        });
    },
  },
};
</script>

<style scoped>
>>> .el-table th.el-table__cell {
  background-color: #e1e5ef;
}
>>> .el-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
</style>
